<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>养殖户</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
        input {
            border: 0; // 去除未选中状态边框
            outline: none!important; // 去除选中状态边框
            background-color: rgba(0, 0, 0, 0); // 透明背景
        }

        body {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
        }

        .header-msg {
            height: 10%;
            display: flex;
            justify-content: left;
            align-items: center;
            background: #3fd5a5;
        }

        #back {
            width: 80%;
            height: 50%;
            display: flex;
            justify-content: left;
            align-items: center;
            margin-left: 30%;
        }

        .icon {
            width: 60%;
            height: auto;
        }

        .title {
            width: 30%;
            height: auto;
            font-size: 1.5rem;
            margin: auto;
            color: #fff;
        }

        .contanier {
            height: 50%;
        }

        #farmersMessage {
            height: auto;
            width: 97%;
            margin: 2% auto;
        }

        #farmersMessage>p {
            margin-bottom: 3%;
            font-size: 1rem;
        }

        #farmersMessage>p>span {
            color: #000;
        }



        #add_sheep {
            position: relative;
            height: 15%;
            width: 100%;
            font-size: 1rem;
            color: #333;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 3px solid #ccc;
            border-bottom: 2px solid #ccc;
        }

        .addicon {
            position: absolute;
            top: 25%;
            left: 34%;
            width: 5%;
            height: 40%;
        }

        #sheepnum {
            height: 95%;
            overflow:scroll;
        }
        .sheepMsg {
            width: 100%;
            height: auto;
            color: #000;
        }

        .sheep-number {
            padding: 3%;
            font-size: 1rem;
        }

        .enter-time {
            padding-left: 3%;
            font-size: 1rem;
        }

        .line {
            width: 100%;
            border: 1px solid #ccc;


        }

        .touch-down {
            opacity: .4;
        }
    </style>
</head>

<body>
    <section class="header-msg">
        <a class="btn-left" id="aui-btn" tapmode="touch-down">
            <section id="back">
                <!-- <img src="../../image/back-off.png" class="icon"> -->
            </section>
        </a>
        <div class="title">养殖户</div>
    </section>
    <section class="contanier">
        <section id="farmersMessage">
            <p><span>养殖场信息：</span><span id="corporation_name"></span></p>
            <p><span>法人姓名：</span><span id="farmers_name"></span></p>
            <p><span>法人联系方式：</span><span id="corporation_phone"></span></p>
            <p><span>法人身份证号：</span><span id="corporation_idcard"></span></p>
            <p><span>养殖场位置：</span><span id="corporation_address"></span></p>
            <p><span>奶羊数量：</span><span id="corporation_sheepnum"></span></p>
        </section>
        <section id="add_sheep" tapmode="touch-down">
            <img src="../../icon/add.png" alt="" class="addicon"> 新增奶羊
        </section>
        <section id="sheepnum">
            <section class="sheepMsg">

            </section>
            <script type="text/html" id='abc'>
                <%for(var i = 0; i<sheep.length; i++){%>
                    <p class="sheep-number"><span>奶羊编号：</span>
                        <%=sheep[i].number%>
                    </p>
                    <p class="enter-time"><span>录入时间：</span>
                        <%=sheep[i].registered_at%>
                    </p>
                    <p class="line"></p>
                    <%}%>
            </script>
        </section>
    </section>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/request.js"></script>
<script type="text/javascript" src="../../script/window.js"></script>
<script type="text/javascript" src="../../script/baiduTemplate.js"></script>
<script type="text/javascript">
    function initFront() {
    }

    function initEvent(){

        //返回上一层
        var back = $api.byId('back')
        $api.addEvt(back, 'touchend', function() {
            api.closeWin();
        });

        var addsheep = $api.byId('add_sheep');

        $api.addEvt(addsheep, 'touchend', function() {
            enterpriseSheep();
        });
    }


    function renderFarmer(){

      var farmersMessage = document.getElementById("farmersMessage");

      var request = new Request('enterprise');
      request.enterprise(function(response, error) {
          console.log(response);
          var farmer = response.farmer;
          var enterprise = farmer.enterprise;
          var corporation_name = farmer.corporation_name
          var name = farmer.name;
          var corporation_phone = farmer.corporation_phone;
          var id_card = farmer.id_card;
          var address = farmer.address;
          var sheepNumber = farmer.sheep_number;
          var enterPrise = farmer.enterprise;
          document.getElementById('corporation_name').innerHTML = corporation_name;
          document.getElementById('farmers_name').innerHTML = name;
          document.getElementById('corporation_phone').innerHTML = corporation_phone;
          document.getElementById('corporation_idcard').innerHTML = id_card;
          document.getElementById('corporation_address').innerHTML = address;
          document.getElementById('corporation_sheepnum').innerHTML = sheepNumber;
        })
      }

    function renderSheep(){
        var request = new Request('enterpriseregistered');
        request.enterpriseregistered(function(response,error) {
          console.log(response);
            if(response.code == 0){
              var bt = baidu.template;
              var html = bt("abc", {sheep:response.sheep});
              document.querySelector(".sheepMsg").innerHTML = html;
            }
        });
    }
    apiready = function() {
        renderFarmer()
        renderSheep();
        initFront();
        initEvent();
    }
</script>

</html>
